<template>
  <div class="app">
    <el-container>
      <el-aside class="app-side app-side-left"
                :class="isCollapse ? 'app-side-collapsed' : 'app-side-expanded'" width="">
        <div class="app-side-logo">

          <img src="../assets/logo.png" :width="isCollapse ? '60' : '60'" height="60" />
        </div>
        <div>
          <el-menu default-active="dashboard"
                   class="el-menu-vertical-demo"
                   @open="handleOpen"
                   :collapse="isCollapse"
                    router>
<!--
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span slot="title">专业管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="college">学院管理</el-menu-item>
                <el-menu-item index="profession">专业管理</el-menu-item>
                <el-menu-item index="profession_bak">专业管理</el-menu-item>
                <el-menu-item index="curriculum">课程管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
-->
            <el-submenu index="unit">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span slot="title">单位管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="school">入驻单位审核</el-menu-item>
                <el-submenu index="organise">
                  <template slot="title">
                    <i class="el-icon-connection"></i>
                    <span slot="title">单位组织管理</span>
                  </template>
                  <el-menu-item index="college">学院管理</el-menu-item>
                  <el-menu-item index="profession">专业管理</el-menu-item>
                </el-submenu>
                <el-menu-item index="course">课程管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
<!--
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-star-on"></i>
                <span slot="title">内容管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="content">内容管理</el-menu-item>
                <el-menu-item index="contently">内容类型管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
-->
            <el-submenu index="template">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span slot="title">模板管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="preview">模板概览</el-menu-item>
                <el-menu-item index="in_ex_port">导入/导出</el-menu-item>
                <el-submenu index="design">
                  <template slot="title">
                    <i class="el-icon-connection"></i>
                    <span slot="title">模板设计</span>
                  </template>
                  <el-menu-item index="contentType">内容类型管理</el-menu-item>
                  <el-menu-item index="content">内容管理</el-menu-item>
                  <el-menu-item index="creatTemplate">模板生成</el-menu-item>
                </el-submenu>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-edit"></i>
                <span slot="title">思政案例管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="allExample">查看所有案例</el-menu-item>
                <el-menu-item index="myExample">查看我的案例</el-menu-item>
                <el-menu-item index="newExample">生成新的案例</el-menu-item>
                <el-menu-item index="importExample">导入案例</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">角色管理</span>
              </template>
              <el-menu-item-group>

                <el-menu-item index="manageAdmin">管理管理员</el-menu-item>
                <el-menu-item index="manageTeacher">管理老师</el-menu-item>
                <el-menu-item index="information">个人信息管理</el-menu-item>

              </el-menu-item-group>
            </el-submenu>

          </el-menu>
        </div>
      </el-aside>

      <el-container>
        <el-header class="app-header">
          <div style="width: 60px; cursor: pointer;"
               @click.prevent="toggleSideBar">
            <i v-show="!isCollapse" class="el-icon-d-arrow-left"></i>
            <i v-show="isCollapse" class="el-icon-d-arrow-right"></i>
          </div>

          <el-menu default-active="dashboard"
                   class="el-menu-demo tab-page"
                   @open="handleOpen"
                   router
                   active-text-color="#409EFF">
            <el-menu-item index="dashboard">返回首页</el-menu-item>
          </el-menu>


          <div class="app-header-userinfo">
            <el-dropdown trigger="hover"
                         :hide-on-click="false">
              <span class="el-dropdown-link">
                {{ username }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item divided  @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <el-main class="app-body">
            <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: 'Container',
    data() {
      return {
        username: '',
        isCollapse: false
      }
    },
    methods: {
      toggleSideBar() {
        this.isCollapse = !this.isCollapse
      },
      logout: function () {
        this.$confirm('确认退出?', '提示', {})
          .then(() => {
            sessionStorage.removeItem('user');
            this.$router.push('/login');
          })
          .catch(() => { });
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
    },
    mounted: function () {
      localStorage.setItem("reqBaseUrl",'http://localhost:9000')
      let user = sessionStorage.getItem('user');
      if (user) {
        this.username = user;
      }
    },
  }
</script>

<style>
</style>
